<template>
  <div class="my-card">
    <div class="card-title no-select">
      <div v-if="!visible" @dblclick="dbTitle">{{ formItem.displayName }}</div>
      <el-input v-else v-model="formItem.displayName" @blur="visible = false"></el-input>
      <el-icon size="20" @click="del">
        <Close />
      </el-icon>
    </div>
    <div class="card-body">
      <el-link @click="readySelect" v-if="formItem.properties?.length > 0">
        <el-text class="w-[180px]" truncated>
          {{ t("审批人") }}：{{ get_json_arr(formItem.properties[0]?.expressions?.Json).join(",") || "请选择审批人" }}
        </el-text>
      </el-link>
    </div>
  </div>
  <div class="card-footer">
    <div class="yes">
      <div>同意</div>
      <div class="add">
        <el-popover
          :width="300"
          placement="top-start"
          trigger="click"
        >
          <el-button icon="edit" @click="addApprove('同意')">审批</el-button>
          <el-button icon="edit" @click="addApproveTask('同意')">审批排程</el-button>
          <el-button icon="chat-square" @click="addSend('同意')">抄送</el-button>
          <el-button icon="close" @click="addEnd('同意')">结束</el-button>
          <template #reference>
            <el-icon size="30">
              <CirclePlus />
            </el-icon>
          </template>
        </el-popover>
      </div>
      <Tag v-if="formItem.yesNext" :form-item="formItem.yesNext"></Tag>
      <div v-else class="not-data-card"></div>
    </div>
    <div class="no">
      <div>拒绝</div>
      <div class="add">
        <el-popover
          :width="300"
          placement="top-start"
          trigger="click"
        >
          <el-button icon="edit" @click="addApprove('拒绝')">审批</el-button>
          <el-button icon="edit" @click="addApproveTask('拒绝')">审批排程</el-button>
          <el-button icon="chat-square" @click="addSend('拒绝')">抄送</el-button>
          <el-button icon="close" @click="addEnd('拒绝')">结束</el-button>
          <template #reference>
            <el-icon size="30">
              <CirclePlus />
            </el-icon>
          </template>
        </el-popover>
      </div>
      <Tag v-if="formItem.noNext" :form-item="formItem.noNext"></Tag>
      <div v-else class="not-data-card"></div>
    </div>
  </div>


  <el-dialog :append-to-body="true" :model-value="dialog_visible"
             style=""
             title="修改名称" width="800"
             @close="close">
    <el-form ref="ruleFormRef" :model="formData" :rules="rules" label-position="top" label-width="auto">
      <el-form-item :label="t('负责人')">
        <el-tree-select
          v-model="formData.users"
          :data="userTreeList"
          :props="{
                  label:'label',
                  value:'label',
                  children: 'children',
                }"
          clearable
          multiple
          style="width: 300px"
          value-key="label"
        ></el-tree-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="submit(ruleFormRef)">{{ t("确定") }}</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script lang="ts" setup>
import { ref } from "vue";
import Tag from "./Tag.vue";
import { useEventBus } from "@/hooks/event/useEventBus";
import { v4 as uuidv4 } from "uuid";
import { get_json_arr, getTreeList } from "@/global/fun";
import { useI18n } from "@/hooks/web/useI18n";
import { rules } from "./data";
import { FormInstance } from "element-plus";
import { getdepartmentusertreelist } from "@/api/deviceMan/DeviceList";

const { t } = useI18n("lims");

const bus = useEventBus();
const props = defineProps<{
  formItem: any
}>();


const visible = ref(false);
const dialog_visible = ref(false);
const formData = ref({
  users: []
});

const dbTitle = () => {
  if (props.formItem.type == "Workflow" || props.formItem.type == "Finish") return;
  visible.value = true;
};

const addApprove = (res: any) => {
  bus.emit("Add", {
    activityId: uuidv4(),
    sourceActivityId: props.formItem.activityId,
    displayName: "审批",
    type: "AuditActivity",
    properties:[{
      expressions:{}
    }],
    outcome: res
  });
};

const addApproveTask = (res: any) => {
  bus.emit("Add", {
    activityId: uuidv4(),
    sourceActivityId: props.formItem.activityId,
    displayName: "审批排程",
    type: "TaskApproveActivity",
    properties:[{
      expressions:{}
    }],
    outcome: res
  });
};
const addSend = (res: string) => {
  bus.emit("Add", {
    activityId: uuidv4(),
    sourceActivityId: props.formItem.activityId,
    displayName: "流程",
    type: "SignalReceived",
    properties:[],
    outcome: res
  });
};
const addEnd = (res: string) => {
  bus.emit("Add", {
    activityId: uuidv4(),
    sourceActivityId: props.formItem.activityId,
    displayName: "结束",
    type: "Finish",
    properties:[],
    outcome: res
  });
};
const del = () => {
  bus.emit("del", props.formItem.activityId);
};
const close = () => {
  dialog_visible.value = false;
};
const userTreeList = ref<any[]>([]);
const getUserThree = async (): Promise<void> => {
  const res = await getdepartmentusertreelist();
  if (res.status == 200) {
    userTreeList.value = getTreeList(res.data);
  }
};
const readySelect = () => {
  formData.value.users = get_json_arr(props.formItem.properties[0]?.expressions?.Json);
  getUserThree();
  dialog_visible.value = true;
};
const ruleFormRef = ref<FormInstance>();
const submit = async (formEl: FormInstance | undefined): Promise<void> => {
  if (!formEl) return;
  await formEl.validate(async (valid) => {
    if (valid) {
      if (!Array.isArray(props.formItem.properties)) {
        props.formItem.properties = [{
          expressions: {
            Json: ""
          }
        }];
      }
      props.formItem.properties[0].expressions.Json = JSON.stringify(formData.value.users);
      console.log(formData.value.users);
      close();
    }
  });
};

</script>

<style lang="less" scoped>
.my-card {
  margin: 20px;
  box-shadow: 0px 0px 10px 3px #9f9f9f;
  width: 200px;
  border-radius: 6px;

  &:before {

  }

  .card-title {
    border-radius: 6px 6px 0 0;
    padding: 4px;
    color: aliceblue;
    background-color: #ff8900;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .card-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 80px;
  }
}

.card-footer {
  min-width: 200px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  position: relative;

  .yes {
    width: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;

    &:before {
      content: "";
      width: 50%;
      height: 1px;
      background: #9f9f9f;
      position: absolute;
      right: 0%;
      top: 0%;
    }
  }

  .no {
    width: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;

    &:before {
      content: "";
      width: 50%;
      height: 1px;
      background: #9f9f9f;
      position: absolute;
      left: 0%;
      top: 0%;
    }
  }
}

.add {
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;

  :after {
    position: absolute;
    content: "";
    width: 1px;
    height: 60px;
    background: #bbbbbb;
  }
}

.not-data-card {
  min-width: 200px;
}
</style>